<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css"/>
	</head>
	<body>
		<header class="aui-bar aui-bar-nav" id="header"></header>
		<footer class="aui-bar aui-bar-tab" id="footer">
			<div id="tabbar1" class="aui-bar-tab-item aui-active" tapmode onclick="randomSwitchBtn(this,'首页',0)">
				<i class="aui-iconfont aui-icon-home"></i>
				<div class="aui-bar-tab-label">
					首页
				</div>
			</div>
			<div id="tabbar2" class="aui-bar-tab-item" tapmode onclick="randomSwitchBtn(this,'消息',1)">
				<i class="aui-iconfont aui-icon-phone"></i>
				<div class="aui-bar-tab-label">
					消息
				</div>
			</div>
			<div id="tabbar3" class="aui-bar-tab-item" tapmode onclick="randomSwitchBtn(this,'我的',3)">
				<i class="aui-iconfont aui-icon-my"></i>
				<div class="aui-bar-tab-label">
					我的
				</div>
			</div>
		</footer>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript">
		apiready = function() {
			api.parseTapmode();
			var header = $api.byId('header');
			$api.fixStatusBar(header);
			var header_h = $api.offset(header).h;
			var footer = $api.byId('footer');
			var body_h = $api.offset($api.dom('body')).h;
			var footer_h = $api.offset(footer).h;
			var h = body_h - header_h - footer_h;
			console.log("header_h:"+header_h);
			api.openFrameGroup({
				name : 'tab',
				rect : {
					x : 0,
					y : header_h,
					w : 'auto',
					h : h
				},
				frames : [{
					name : 'main',
					url : 'device/main.html',
					bounces : true
				}, {
					name : 'main',
					url : 'device/main.html',
					bounces : true
				}, {
					name : 'main',
					url : 'device/main.html',
					bounces : true
				}]
			}, function(ret, err) {
				//coding...
			});
		};
		function randomSwitchBtn(obj, name, index) {
			var footer = $api.byId('footer');
			var footerAct = $api.dom(footer, '.aui-bar-tab-item.aui-active');
			$api.removeCls(footerAct, 'aui-active');
			$api.addCls(obj, 'aui-active');
			api.setFrameGroupIndex({
				name : 'footer_tab',
				index : index,
				scroll : true
			});
		}
	</script>
</html>